<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/common.css"></link>
    <link rel="stylesheet" href="css/container.css"></link>
    <link rel="stylesheet" href="css/phone-title.css"></link>
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/wrap-chat.css"></link>
    <link rel="stylesheet" href="css/wrap-add-friend.css"></link>

</head>
<body>
    <div id="container">
        <!--信号,时间,电池-->
        <div id = "phone-title">
            <!--信号-->
            <div id="phone-title-left">
                <div class="signal"></div>
                <div class="signal"></div>
                <div class="signal"></div>
                <div class="signal"></div>
                <div class="no-signal"></div>
                <div>中国移动 &nbsp;4G</div>
            </div>
            <!--时间-->
            <div id="phone-title-center">
                <div>08:08</div>
            </div>
            <!--电池-->
            <div id="phone-title-right">
                <div>87%</div>
                <!--壳和电量-->
                <div>
                    <div></div>
                </div>
                <!--正极-->
                <div></div>
            </div>
        </div>

<!--        返回，信息条数，加号-->
        <div id="header" class="header-font">
            <div id="header-control">
                <div></div>
                <div>返回</div>
            </div>

<!--            信息条-->
            <div id="msg">微信(10)</div>

<!--            加号-->
            <div id="function">
                <div id="add"></div>
            </div>

        </div>

<!--        微信列表，通讯录，发现，我-->
        <div id="wrap-chat"></div>
        <div id="wrap-add-friend"></div>
        <div id="wrap-discovery"></div>
        <div id="wrap-me"></div>

    </div>
</body>
</html>